<!-- MAIN APPLICATION CONTENT -->

<div class="main-wrapper" id="main-wrapper">



	<!-- COVER AND PLAYLIST VIEWS -->
	<div class="coverAndPlaylistArea" id = "coverAndPlaylistArea">


		<div id="display">


			<button id="subscribebutton">+ save playlist</button>

			<div id="albumCoverContainer" class="albumCoverContainer"></div>
			<div id="playlistContainer" class="playlistContainer"></div>

			<div class="holder" id="holder"></div>
			
			<div id="flipbuttonwrapper">
				<a href="#" id="flipbutton">switch view</a>
			</div>
			
			<div id="throbberContainer" class="throbberContainer"></div>
			
		</div>
		
		
			<div id="throbberInfo"></div>
			<div id = "seedArtistID"></div>
			<div id = "seedArtistName"></div>
			<div id = "seedSongID"></div>
			<div id = "seedSongName"></div>

			<div id = "seedCatalogID"></div>
			<div id = "seedCatalogName"></div>
			<div id = "styleTerm"></div>
			
			
			
			
			

	</div>
	<div id = "nextSongsArrow"  title="click to load next songs"></div>
	<!-- end cover and playlist views -->



	<!-- GUI -->

	















	<div class='guiContainer2'>
	
	
<!-- 	<button id="nextSongsButton">Ok, load next songs</button> -->
	
	
	<!--     	SIMILARITY SECTION -->

	<div class="similaritySection Section">
	
	<form id='formSimilaritySection'>
	
	<table id = similarityTable border =0 >
		
		   	<col class="column-one">
        	<col class="column-two">
        	<col class="column-three">
        	<col class="column-four">
        	
        	
 <tr>
    <td id = simBasedOn1><div id = 'similarityBasedOnLabel' >Similarity based on</div></td>
    <td><label  class="block"><input type="radio" class='radio' name="sim"  id="artistRadiobtn" value="artist">Artist : </label></td>
    <td id = artistSimilarityInfoCell><div id = 'similarityInfo'></div></td>
    <td><button id="changeSeedArtist" class = 'simButton' >Make playing artist new seed artist</button></td>
  </tr>
  
  
  <tr>
	<td id = simBasedOn2></td>
  	<td><label class="block"><input type="radio"  class='radio' name="sim" id="songRadiobtn"    value="song">Song :</label></td>
    <td id =songSimliarityInfoCell></td>
    <td><button id=changeSeedSong class = 'simButton'>Make playing song new seed song</button></td>
  
  </tr>
  
  
  <tr>
  	<td id = simBasedOn3></td>
    <td><label class="block"><input type="radio"  class='radio' name="sim" id="genreRadiobtn"   value="genre">Genre : </label></td>
    <td id = genreSimilarityInfoCell></td>
    <td><div class="ui-widget">
					<label for="tags" id='genreSelectLabel'>Select a Genre: </label>  <input id="tags" />
		</div></td>
  </tr>
  
  
  <tr>
  <td id = simBasedOn4></td>
    <td><label class="block"><input type="radio"  class='radio' name="sim" id="playlistRadiobtn" value="spotifyPlaylist">Spotify Playlist : </label></td>
    <td id = playlistSimilarityInfoCell></td>
    
    <td>
    <div class="ui-widget">
					<label for="tags1" id='playlistSelectLabel'>Select a playlist: </label>  <input id="tags1" /></div>
	</td>
    
  </tr>
        	
        	
  </table>      	
        	
        	
        	
 </form>      	
        	
        	
        	
        	
        	
        	
        	
        	
        	
        	
        	
        	
        	
	
	
		</div>

<!--     	 end of similarity section -->
	
<div class="popularitySection Section">
	<table width = 100%>
	
		<tr>
			
			<td>
				<!--Song Hotness Slider-->
				<label>Song Trendiness:</label>
				<br>
			
				<div class="sliderClass">
				<div id="slider-songHot"></div>
				</div>
			
				<div class = 'offLabel' id = 'songHotOffLabel'>Off</div>
				<div class = 'lowLabel songHotSliderLabel'>Low</div>
				<div class = 'mediumLabel songHotSliderLabel'>Medium</div>
				<div class = 'highLabel songHotSliderLabel'>High</div>
				<br>
			</td>
			
			
			
			
			
			<td>
					<!--Artist Hotness Slider-->
			<label for="slider-hot">Artist Trendiness:</label>
			<br>
			
			<div class="sliderClass">
				<div id="slider-hot"></div>
			</div>
			<div class = 'offLabel' id = 'artistHotOffLabel'>Off</div>
			<div class = 'lowLabel artistHotSliderLabel'>Low</div>
			<div class = 'mediumLabel artistHotSliderLabel'>Medium</div>
			<div class = 'highLabel artistHotSliderLabel'>High</div>
			<br>
			</td>
			
			<td>
				<!-- Popularity Slider -->
			<label for="pop">Artist Popularity:</label>
			<br>
			
			<div class="sliderClass">
				<div id="slider-pop"></div>
			</div>
			<div class = 'offLabel' id = 'artistPopOffLabel'>Off</div>
			<div class = 'lowLabel artistPopSliderLabel'>Low</div>
			<div class = 'mediumLabel artistPopSliderLabel'>Medium</div>
			<div class = 'highLabel artistPopSliderLabel'>High</div>
			</td>
			
		
</table>
</div>		
	
	
	
	

	


		<!-- NOVELTY SECTION -->

		<table width = 100%>
	<tr> 
		
		<td >
		<div class="noveltySection Section">

			<label>Novelty:</label>
		<br>
		<p>
				
				<label id="excludeSpotifyPlaylistSongs"> <input
					type="checkbox" id="excludeSpotifyPlaylistSongsCheckBox">no
					songs from my spotify Playlists
				</label>
				<br>
				<label id="excludeSeedArtistLabel"> <input type="checkbox"
					id='excludeSeedArtistCheckBox'>exclude similarity base artist
				</label><br> 
		</div>
	
	
</td>


<td>

		<!-- DIVERSITY SECTION -->
		<div class="diversitySection Section">

			<label>Recommendation Diversity:</label>
			
			
				<br>
					<label>Artist Variety:</label>
			
				<div class="sliderClass">
					<div id="artistVarietySlider"></div>
				</div>
				
				<label id="adventurousnessSliderLabel" for="adventurousnessSlider">Adventurousness:</label>
			
				<div class="sliderClass">
					<div id="adventurousnessSlider"></div>
				</div>
				
				
			<div id = 'lowLabelDiversity'>Low</div>
			
			<div id = 'highLabelDiversity'>High</div>
			
			
				
			
		</div>
	</td>	
		
		
<td>

		<!-- YEAR SECTION -->
		<div class="yearSection Section" id= 'yearSection'>
			
				<div id = 'artistStartedLabelDiv' >
				<label id = 'artistStartedLabel'>Artists started recording after: </label>
						
				<input id="artist_start_year_after_input" class = "yearInput"/>
				</div>
			
				
				<!-- <br>
					<label class='beforeLable'>Before:</label> 

				<input id="artist_start_year_before_input" class = "yearInput"/>
			
				
				<p><br> -->
				
				<div id = 'artistStoppedLabelDiv'>
				<label>Artists stopped recording before: </label>
				<input id="artist_end_year_before_input" class = "yearInput"/>
				</div>
					
			<!-- 	<label class='afterLable'>After:</label> 
				
					<input id="artist_end_year_after_input" class = "yearInput"/> -->
				
			
				
				
				
				
				
					
				
					
			<!-- 		<label
					class='afterLabel'>After</label> <select name="yearpicker2"
					id="artist_start_year_after" class="yearpick"></select>
					
					 <p>&nbsp;</p>
					
					
					<label>Artists
					stopped recording</label><br> <label class='beforeLable'>Before</label>
				<select name="yearpicker3" id="artist_end_year_before"
					class="yearpick"></select><br> <label class='afterLabel'>After</label>
				<select name="yearpicker4" id="artist_end_year_after"
					class="yearpick"></select> -->


				

			</div>	
	
		
		
		
		</td></tr>

</table>
	
		
	

		<!--TAGCLOUD-->
	
		<div id="tagcloud-wrapper" class="tagcloud-wrapper">
			<div id="tagCloud" title="click to filter by artist description">Artist
				Style Terms Tag Cloud</div>
		
		</div>










		

</div>
	
<!-- end of gui container2 -->

</div>
<!-- end main wrapper -->